<!-- PopupTip 弹出层提示 -->
<template>
  <zm-popup
    z-index="z-2208"
    custom-class="z-2220"
    class="PopupTip"
    v-model="show"
    :closeable="false"
  >
    <view class="PopupTip-content" :class="[{ bg: hasBgImg }, extClass]">
      <slot>
        <view class="title">{{ title }}</view>
        <view
          v-if="desc"
          class="content html-img"
          v-html="$utils.toHtml(desc)"
        ></view>
      </slot>
      <view v-if="$slots.desc" class="content">
        <slot name="desc"></slot>
      </view>
    </view>
    <view class="tc" v-if="hasClose">
      <u-icon class="icon-close" name="close" @click="handleClose" />
    </view>
  </zm-popup>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  export default {
    name: 'PopupTip',
    components: { ZmPopup },
    props: {
      value: {
        type: Boolean,
        required: true
      },
      title: String,
      desc: String,
      // 是否默认背景图
      hasBgImg: {
        type: Boolean,
        default: true
      },
      extClass: String,
      hasClose: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    computed: {
      show: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    methods: {
      handleClose() {
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .PopupTip-content {
    // position: relative;
    border-radius: 20rpx;
    text-align: center;
    width: 560rpx;
    padding-top: 60rpx;
    padding-bottom: 50rpx;
    padding-right: 30rpx;
    padding-left: 30rpx;
    z-index: 2211;
    // background: #fff;

    &.bg {
      // background: url('../../assets/img/userAgreeBg.png') no-repeat right top
      //   #fff;
      background-size: 138rpx 105rpx;
    }
    .title {
      color: $mainColor;
      font-size: 40rpx;
      margin-bottom: 55rpx;
      font-weight: 500;
    }
    .content {
      color: #888;
      color: 26rpx;
      font-weight: 500;
    }
  }

  .icon-close {
    font-size: 70rpx;
    color: #fff;
    margin-top: 60rpx;

    // display: block;
  }
  .z-2208 {
    z-index: 2208 !important;
  }
  .z-2220 {
    z-index: 2220 !important;
  }
</style>
